/** CSS3 Gallery Example by (C) Andrea Giammarchi for Ajaxian */
html, body, ul.thumb, ul.thumb li {
    padding: 0;
    margin: 0;
}
html, body, ul.thumb {
    width: 600px;
    height: 450px;
    overflow: hidden;
}
ul.thumb {
    position: relative;
    list-style: none;
    /* a gradient background with wide diffusion is quite hard
       to handle without Direct2D or better hardware strategies but
       it could make the box-shadow effect more real at the same time.
       Setting it as important we can be sure supported browser will use it
       while other browser will use just the normal background color
    */
    background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333)) !important;
    background: #333;
}
ul.thumb li {
    position: absolute;
    padding: 6px 6px 24px 6px;
    background: #FFF;
    width: 150px;
    height: 130px;
    /* box shadow is heavy as well if we need
       to rotate it during the animation or if
       we have not a flat background behind
       The alpha channel needs to work a lot
       but it gives 3D feeling
    */
    -moz-box-shadow:1px 1px 6px #222;
    -webkit-box-shadow:1px 1px 6px #222;
    box-shadow:1px 1px 6px #222;
    /* to activate transiction FXs
       this is all we need
       specifying "all" means that
       the browser will try to resolve
       and computate everything
       z-index included
    */
    -webkit-transition: all 800ms ;
    /* to create a better 3D feeling
       z-index will be in a range from 0 to 10
       this means while another pic is going
       back to its position another rollovered one
       will gradually reach higher z-index
    */
    z-index: 0;
}
ul.thumb li img {
    width: 100%;
    height: 100%;
}

/* here is how the LI element should look
   at the end of the transition which
   will be activated on hover special selector
*/
ul.thumb li:hover{
    z-index: 10;
    /* original image size */
    /* put the LI in the center (almost due to bottom padding) */

    /* the effect is a "zoom" one, the shadow will be bigger */
    -moz-box-shadow:8px 8px 24px #111;
    -webkit-box-shadow:8px 8px 24px #111;
    box-shadow:8px 8px 24px #111;
    /* and finally order via zero degrees rotation */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
